<template>
    <div>
        <Title :title="title"></Title>
        <div ref="bottom4" style="height: 100px;"></div>
    </div>
</template>
<script>
import { Rose } from '@antv/g2plot';
import { get } from '@/utils/request';
import moment from 'moment';
import { mapState } from 'vuex';
export default {
    data() {
        return {
            title: '实时风向监测',
            params: {
                page: 1,
                pageSize: 100
            },
            windData: [],  // 风向数据
            rosePlot: null, // 玫瑰图实例，用于更新
            updateInterval: null, // 定时器实例
            lastUpdateTime: null, // 最后更新时间
            // 风向配置映射表
            directionConfig: [
                { name: '北', min: 337.5, max: 22.5, angle: 0 },
                { name: '东北', min: 22.5, max: 67.5, angle: 45 },
                { name: '东', min: 67.5, max: 112.5, angle: 90 },
                { name: '东南', min: 112.5, max: 157.5, angle: 135 },
                { name: '南', min: 157.5, max: 202.5, angle: 180 },
                { name: '西南', min: 202.5, max: 247.5, angle: 225 },
                { name: '西', min: 247.5, max: 292.5, angle: 270 },
                { name: '西北', min: 292.5, max: 337.5, angle: 315 }
            ]
        }
    },
    computed:{
        ...mapState(['ed'])
    },
    // 侦听器，侦听数据
    watch:{
        ed:{
            handler(n,o){
                // 根据设备信息重新查询数据，重新渲染图表
                this.params.engineer_id=n.engineer_id;
                this.params.device_id=n.device_id;
                this.fetchWindData();
                // 根据最新获取的数据重新渲染图表
                this.line.changeData(this.windData);
            },
            // 深度监听
            deep:true
        }
    },
    methods: {
        // 初始化玫瑰图
        initWindRose() {
            // 创建新的玫瑰图
            this.rosePlot = new Rose(this.$refs.bottom4, {
                data: this.windData,
                xField: 'angle',
                yField: 'frequency',
                seriesField: 'direction',
                radius: 0.8,
                innerRadius: 0.1,
                angleField: 'angle',
                color: [
                    '#1890ff', '#13c2c2', '#2fc25b', '#facc15',
                    '#fa8c16', '#f5222d', '#722ed1', '#eb2f96'
                ],
                label: {
                    position: 'outer',
                    formatter: (datum) => {
                        return `${datum.direction}`;
                    },
                    style: {
                        fill: '#ffffff', // 标签文字颜色设为白色
                        fontSize: 9, 
                    }
                
                },
                legend: {
                    itemName: {
                        style: {
                            fill: 'white',
                            fontSize: 11,
                        }
                    }
                },
                tooltip: {
                    formatter: (datum) => {
                        return {
                            name: datum.direction,
                            value: `角度: ${datum.angle}°`,
                        };
                    },
                    domStyles: {
                        "g2-tooltip": {
                            background: '#147',
                            color: "white",
                            fontSize:15
                        }
                },
                }
            });
            this.rosePlot.render();
        },
        // 更新玫瑰图数据
        updateWindRose() {
            if (this.rosePlot) {
                // 更新图表数据
                this.rosePlot.changeData(this.windData);
                // 记录最后更新时间
                this.lastUpdateTime = moment().format('YYYY-MM-DD HH:mm:ss');
            }
        },
        // 处理原始数据为玫瑰图所需格式
        processWindData(rawData) {
            // 过滤有效数据
            const validData = rawData.map(item => ({
                windDirection: Number(item.wind_direction) || 0
            })).filter(item => item.windDirection >= 0 && item.windDirection <= 360);
            // 计算每个风向的频率
            return this.directionConfig.map(dir => {
                // 统计该风向范围内的数据数量
                const count = validData.filter(item => {
                    if (dir.name === '北') {
                        // 北风特殊处理（跨0度）
                        return item.windDirection >= dir.min || item.windDirection <= dir.max;
                    }
                    return item.windDirection > dir.min && item.windDirection <= dir.max;
                }).length;
                // 计算频率百分比
                const total = validData.length;
                const frequency = total > 0 ? Math.round((count / total) * 100) : 0;
                return {
                    direction: dir.name,
                    angle: dir.angle,
                    frequency: frequency
                };
            });
        },
        // 获取并更新风向数据
        async fetchWindData() {
            try {
                const res = await get('/dashboard/pageQueryTodayData', this.params);
                if (res.data?.list && res.data.list.length > 0) {
                    // 处理数据
                    this.windData = this.processWindData(res.data.list);
                    // 如果是首次加载，初始化图表；否则更新图表
                    if (!this.rosePlot) {
                        this.initWindRose();
                    } else {
                        this.updateWindRose();
                    }
                }
            } catch (error) {
                // console.error('获取风向数据失败:', error);
            }
        }
    },
    async mounted() {
        // 首次加载数据
        await this.fetchWindData();
        // 设置定时更新（每30秒更新一次，可根据需求调整）
        this.updateInterval = setInterval(() => {
            this.fetchWindData();
        }, 2000);
    },
}
</script>
<style lang="less" scoped>
</style>
